<template>
    <div class="bx-editor addClaim">
        <van-nav-bar title="编辑信息" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)"/>
        <div style="height:50px"></div>
        <div class="title">
            基本信息
        </div>
        <van-cell-group>

            <van-field v-model="claim_number" label="理赔单号" placeholder="请输入理赔单号" size="large" required/>
            <van-field v-model="order_no" label="保单号" placeholder="请输入保单号" size="large" required/>
            <van-field v-model="worker_name" label="员工姓名" placeholder="请输入员工姓名" size="large" required/>
            <div class="radio">
                <div><span style="color: #ee0a24">*</span>性别</div>
                <van-radio-group v-model="gender">
                    <van-radio :name="1" checked-color="#366cb3">男</van-radio>
                    <van-radio :name="2" checked-color="#366cb3">女</van-radio>
                </van-radio-group>
            </div>
            <van-field v-model="work_card_number" label="身份证号码" placeholder="请输入身份证号码" size="large" required/>
            <van-field v-model="contact_phone" label="联系电话" placeholder="请输入联系电话" size="large" required/>
            <van-field v-model="type_work" label="工种" placeholder="请输入工种" size="large" required/>

            <van-field readonly clickable required label="出险地址" :value="`${province}${city}${area}`"
                       placeholder="--请选择--" @click="addressPopupShow = true"/>
            <van-popup v-model="addressPopupShow" position="bottom">
                <van-area ref="area" value="110000" :area-list="areaList" @confirm="confirmAddress"
                          @cancel="addressPopupShow = false"/>
            </van-popup>
            <van-field required v-model="address" label="详细地址" placeholder="请输入详细地址" size="large"/>

            <van-field readonly clickable required label="保险公司" :value="`${companyName}`" placeholder="--请选择--"
                       @click="companyPicker = true"/>
            <van-popup v-model="companyPicker" position="bottom">
                <van-picker show-toolbar value-key="name" :columns="companyList" @cancel="companyPicker = false"
                            @confirm="onCompany"/>
            </van-popup>

            <div class="danger-box">
                <van-field required readonly clickable label="出险时间" :value="risk_time_d" placeholder="--请选择--"
                           @click="dangerPop = true"/>
                <van-field readonly clickable :value="risk_time_hm" placeholder="--请选择--" @click="dangerPop2 = true"/>
            </div>

            <van-field required v-model="injury" rows="2" autosize label="受伤情况" type="textarea" maxlength="50"
                       placeholder="请输入受伤情况"/>
            <van-field v-model="hospital" label="就诊医院" placeholder="请输入就诊医院" size="large" required/>
            <van-field v-model="medical_expenses" label="就诊费用（预计）" placeholder="请输入就诊费用（预计）" size="large" required/>
            <div class="radio">
                <div><span style="color: #ee0a24">*</span>门诊/住院</div>
                <van-radio-group v-model="outpatient_inpatient">
                    <van-radio :name="'门诊'" checked-color="#366cb3">门诊</van-radio>
                    <van-radio :name="'住院'" checked-color="#366cb3">住院</van-radio>
                </van-radio-group>
            </div>
            <div v-if="outpatient_inpatient=='住院'">
                <van-field v-model="department" label="科室" placeholder="请输入科室" size="large" required/>
                <van-field v-model="ward_number" label="病房号" placeholder="请输入病房号" size="large" required/>
                <van-field v-model="bed_number" label="病床号" placeholder="请输入病床号" size="large" required/>
            </div>
            <div class="list-img">
                <div class="list-img-title">
                    事故现场照片
                </div>
                <van-uploader v-model="image_one" :after-read="afterRead" :name="'image_one'" multiple/>
            </div>
            <div class="list-img">
                <div class="list-img-title">
                    伤者受伤部位裸露照片
                </div>
                <van-uploader v-model="image_two" :after-read="afterRead" :name="'image_two'" multiple/>
            </div>
            <div class="list-img">
                <div class="list-img-title">
                    手持身份证与上半身同框照片
                </div>
                <van-uploader v-model="image_three" :after-read="afterRead" :name="'image_three'" multiple/>
            </div>
            <div class="list-img">
                <div class="list-img-title">
                    身份证正反面
                </div>
                <van-uploader v-model="image_four" :after-read="afterRead" :name="'image_four'" multiple/>
            </div>
            <div class="list-img">
                <div class="list-img-title">
                    手持身份证全身照
                </div>
                <van-uploader v-model="image_five" :after-read="afterRead" :name="'image_five'" multiple/>
            </div>
        </van-cell-group>

        <van-popup v-model="dangerPop" position="bottom">
            <van-datetime-picker v-model="dangerDate" type="date" :min-date="minDate" @cancel="dangerPop = false"
                                 @confirm="timeConfirm()"/>
        </van-popup>
        <van-popup v-model="dangerPop2" position="bottom">
            <van-datetime-picker v-model="risk_time_hm" type="time" @cancel="dangerPop2 = false"
                                 @confirm="dangerPop2 = false"/>
        </van-popup>
        <div class="foot-btn">
            <div class="blue-btn" @click="pushInfo()">保存</div>
        </div>
    </div>
</template>

<script>
    import AddressEdit from "../../plugins/area";

    export default {
        name: "addClaim",
        data() {
            return {
                message: '',
                minDate: new Date(1970, 0, 1),
                dangerDate: new Date(),
                dangerPop: false,
                // dangerDate2: '10:00',
                dangerPop2: false,

                addressPopupShow: false,
                areaList: AddressEdit,

                qiniuToken: '',


                companyPicker: false,
                companyName: '',
                companyList: [],

                claim_number: '',//理赔单号
                order_no: '',//保单号
                company_id: '',  // 订单状态
                worker_name: '',  // 员工姓名
                contact_phone: '',  // 联系电话
                gender: 1,  // 性别
                type_work: '',  // 工种
                work_card_number: '',  // 工伤人员身份证号码
                province: '',  // 出险地点 省
                city: '',  // 出险地点 市
                area: '',  // 出险地点 区
                address: '',  // 详细地址
                risk_time_d: '',  // 出险日期 日期
                risk_time_hm: '10:00',  // 出险日期  分秒

                injury: '',  // 受伤情况
                hospital: '',  // 就诊医院
                medical_expenses: '',  // 就诊费用
                outpatient_inpatient: '',  // 门诊/住院
                department: '',  // 科室
                ward_number: '',  // 病房号
                bed_number: '',  // 病床号

                image_one: [],  // 	事故现场照片
                image_two: [],  // 	伤者受伤部位裸露照片
                image_three: [],  // 手持身份证与上半身同框照片
                image_four: [],  // 身份证正反面
                image_five: [],  // 手持身份证全身照


            };
        },
        methods: {
            getInfo() {
                let params = {
                    token: localStorage.getItem('token'),
                };
                this.$post("/api/compensate_order/company", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.companyList = res.data
                        } else {
                            this.$Toast(res.msg);
                        }
                    }).catch(err => {
                });

            },
            timeTurn(val) {
                return this.$formatDateTime(val, 'yyyy-MM-dd');
            },
            confirmAddress(value) {
                console.log(value);
                this.province = value[0].name
                this.provinceCode = value[0].code

                this.city = value[1].name
                this.cityCode = value[1].code

                this.area = value[2].name
                this.areaCode = value[2].code

                this.addressPopupShow = false
            },

            getQiniuToken() {
                this.$post("/api/qiniu/up_token", {})
                    .then(res => {
                        this.qiniuToken = res
                    })
                    .catch(err => {
                    });

            },
            afterRead(file, detail) {
                let arrName = detail.name
                let arrIndex = detail.index
                this.$Toast.loading({
                    message: '上传中',
                    duration: 0,
                    forbidClick: true
                });
                if (!!file.length) {
                    file.map((item, index) => {
                        let newIndex = arrIndex + index
                        this.$QiniuUpload(this.qiniuToken, item)
                            .then(res => {
                                if (arrName == 'image_one') {
                                    this.image_one[newIndex].url = this.qiniuToken.domain + res.key
                                } else if (arrName == 'image_two') {
                                    this.image_two[newIndex].url = this.qiniuToken.domain + res.key
                                } else if (arrName == 'image_three') {
                                    this.image_three[newIndex].url = this.qiniuToken.domain + res.key
                                } else if (arrName == 'image_four') {
                                    this.image_four[newIndex].url = this.qiniuToken.domain + res.key
                                } else if (arrName == 'image_five') {
                                    this.image_five[newIndex].url = this.qiniuToken.domain + res.key
                                }
                            })
                            .catch(err => {
                                this.$Toast.clear();
                            });
                    })
                    this.$Toast.clear();
                } else {
                    this.$QiniuUpload(this.qiniuToken, file)
                        .then(res => {
                            if (arrName == 'image_one') {
                                this.image_one[arrIndex].url = this.qiniuToken.domain + res.key
                            } else if (arrName == 'image_two') {
                                this.image_two[arrIndex].url = this.qiniuToken.domain + res.key
                            } else if (arrName == 'image_three') {
                                this.image_three[arrIndex].url = this.qiniuToken.domain + res.key
                            } else if (arrName == 'image_four') {
                                this.image_four[arrIndex].url = this.qiniuToken.domain + res.key
                            } else if (arrName == 'image_five') {
                                this.image_five[arrIndex].url = this.qiniuToken.domain + res.key
                            }
                            this.$Toast.clear();
                        })
                        .catch(err => {
                            this.$Toast.clear();
                        });
                }

            },
            pushInfo() {

                let image_oneArr = []
                this.image_one.map((item, index) => {
                    image_oneArr.push(item.url)
                })


                let image_twoArr = []
                this.image_two.map((item, index) => {
                    image_twoArr.push(item.url)
                })


                let image_threeArr = []
                this.image_three.map((item, index) => {
                    image_threeArr.push(item.url)
                })


                let image_fourArr = []
                this.image_four.map((item, index) => {
                    image_fourArr.push(item.url)
                })


                let image_fiveArr = []
                this.image_five.map((item, index) => {
                    image_fiveArr.push(item.url)
                })

                let data = {
                    token: localStorage.getItem('token'),
                    // wx_member_id: localStorage.getItem('wx_member_id'),
                    // id: this.$route.query.id,
                    claim_number: this.claim_number,
                    order_no: this.order_no,
                    company_id: this.company_id,  // 订单状态
                    worker_name: this.worker_name, // 员工姓名
                    contact_phone: this.contact_phone,// 联系电话
                    gender: this.gender, // 性别
                    type_work: this.type_work,// 工种
                    work_card_number: this.work_card_number,  // 工伤人员身份证号码
                    province: this.province,  // 出险地点 省
                    city: this.city,// 出险地点 市
                    area: this.area,// 出险地点 区
                    address: this.address,// 详细地址
                    risk_time_d: this.risk_time_d, // 出险日期 日期
                    risk_time_hm: this.risk_time_hm,// 出险日期  分秒
                    injury: this.injury, // 受伤情况
                    hospital: this.hospital, // 就诊医院
                    medical_expenses: this.medical_expenses,// 就诊费用
                    outpatient_inpatient: this.outpatient_inpatient,// 门诊/住院
                    department: this.department, // 科室
                    ward_number: this.ward_number,// 病房号
                    bed_number: this.bed_number,// 病床号

                    image_one: image_oneArr.join('|'),// 病床号
                    image_two: image_twoArr.join('|'),// 病床号
                    image_three: image_threeArr.join('|'),// 病床号
                    image_four: image_fourArr.join('|'),// 病床号
                    image_five: image_fiveArr.join('|'),// 病床号
                }
                if (data.outpatient_inpatient == '门诊') {
                    data.department = ''
                    data.ward_number = ''
                    data.bed_number = ''
                }
                this.$post("/api/compensate_order/save_compensate_order", data)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast(res.msg);
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);
                        } else {
                            this.$Toast(res.msg);


                        }
                    })
                    .catch(err => {
                    });
            },
            onCompany(value) {
                this.companyName = value.name;
                this.company_id = value.id;
                this.companyPicker = false;
            },
            timeConfirm() {
                this.risk_time_d = this.timeTurn(this.dangerDate);
                this.dangerPop = false
            },
        },
        created() {
            // 实例创建完成
            this.getInfo();
            this.getQiniuToken();
        },
        beforeCreate() {
            document.querySelector("body").setAttribute("style", "background-color:#fff");
        }
    }
</script>

<style scoped lang='less'>
    .radio {
        display: flex;
        align-items: center;
        padding: 10px;

        div:nth-of-type(1) {
            width: 126px;
            font-size: 14px;
        }
    }

    .up-img {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 13px;
        padding-right: 15px;
        margin-bottom: 15px;
        margin-top: 20px;

        > div:nth-of-type(1) {
            margin-left: 13px;
            margin-right: 22px;
        }

        .up-icon {
            width: 57vw;
            height: 112px;
        }
    }

    .foot-btn {
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 32px;
    }

    .list-img {
        padding: 0 15px 15px;

        .list-img-title {
            color: #333;
            font-size: 16px;
            height: 50px;
            display: flex;
            align-items: center;
        }
    }
</style>